<template>
	<view class="page-div">
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom">
			<block slot="content">
				约看
			</block>
		</cu-custom>
		<view class="warp30"></view>
		<form>
			<view class="cu-form-group">
				<view class="title">房源</view>
				<view class="text">吉大海湾花园85平方米3房南向精装楼盘吉大海湾花园85平方米3房南向精装楼盘</view>
			</view>
			<view class="cu-form-title">
				客人信息
			</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<view class="text">李思思</view>
			</view>
			<view class="cu-form-group">
				<view class="title">手机</view>
				<view class="text">13524545656</view>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<view class="text">女</view>
			</view>
			<view class="cu-form-title">
				看房计划
			</view>
			<view class="cu-form-group">
				<view class="title">看房时间</view>
				<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
					<view class="picker">
						{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">到场方式</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{picker[index]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-title">
				备注
			</view>
			<view class="cu-form-group">
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="输入需要备注的内容"></textarea>
			</view>
			<view class="cu-form-title sm">
				*最终以房东确认时间为准。
			</view>
			<view class="warp120"></view>
			<view class="cu-bar foot">
				<view class="padding flex flex-direction w100">
					<button class="cu-btn bg-red margin-tb-sm lg">预约</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				labelDataList: '',
				picker: ['途径1', '途径2', '途径3'],
				multiArray: [
					[],
					["上午 12:00 前", "下午 12:00-18:00", "晚上 18:00 以后"]
				],
				index:0,
				multiIndex: [0, 0],
			};
		},
		onLoad(event){
			for(let i=0;i<7;i++){
				this.multiArray[0].push(this.getDay(i));
			}
			console.info(this.multiArray);
		},
		methods:{
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			getDay(day){  
			   var today = new Date();  
				 
			   var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;          
		  
			   today.setTime(targetday_milliseconds); //注意，这行是关键代码
				 
			   var tYear = today.getFullYear();  
			   var tMonth = today.getMonth();  
			   var tDate = today.getDate();  
			   tMonth = tMonth + 1;  
			   tDate = tDate;  
			   return tMonth+"月"+tDate+"日";  
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			MultiChange(e) {
				console.info(e.detail.value)
				this.multiIndex = e.detail.value
			},
			MultiColumnChange(e) {
				console.info(e.detail.value)
			},
		}
	}
</script>

<style lang="less">
	.cu-bar.foot{
		z-index: 1;
	}
	.page-div{
		min-height: 100%;
		background: #f2f2f2;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	input{
		text-align: right;
	}
	.text{
		overflow: hidden;
		line-height: 60upx;
		height: 60upx;
		flex: 1;
		text-align: right;
		color: #a1a1a1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.title{
		font-size: 28upx;
		padding-left: 20upx;
	}
	.cu-form-title{
		background: #f2f2f2;
		color: #333333;
		padding: 1px 15px;
		line-height: 2.5;
		font-size: 30upx;
		&.sm{
			font-size: 20upx;
			color: #7e7e7e;
		}
	}
	.select-item-title {
		margin-bottom: 10upx;
		line-height: 2;
		color: #666666;
		font-size: 28upx;
		display: block;
	}
	
	.select-item-list {
		padding: 0;
	
		.select-item-list-item {
			width: 25%;
			text-align: center;
			float: left;
			padding: 0;
	
			.select-item-list-item-btn {
				margin: 0 5% 10upx;
				border: 2upx solid #f6f6f6;
				background: #f6f6f6;
				color: #666666;
				box-sizing: border-box;
				border-radius: 6upx;
				width: 90%;
				text-align: center;
				font-size: 24upx;
				line-height: 2.5;
				display: block;
				padding: 0;
	
				&.on {
					background: #fff;
					border-color: #ff5f15;
					color: #ff5f15;
				}
			}
	
			&.w50 {
				width: 50%;
	
				.select-item-list-item-btn {
					margin: 0 2.5% 10upx;
					width: 95%;
				}
			}
		}
	}
	.w100{
		width: 100%;
	}
</style>
